<template>
    <div style="position: relative;">
        <div class="wineMenu">
            <div v-for="(item, index) in menuList" :key="index" :class="{ menuActive: index == isActive }">
                <span @click="menuChose(index)">{{ item }}</span>
                <div></div>
            </div>
        </div>
        <!-- 待寄存确认 start -->

        <!-- 待寄存确认 end -->
        <!-- 待领取确认 start -->

        <!-- 待领取确认 end -->
        <!-- 存酒记录 start -->
        <div class="wineContent" v-if="isActive == '0'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="WineRecordData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="WineRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineRecordData.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item upper-date">
                            <span class="book-title">存酒日期：</span>
                            <el-date-picker v-model="StoreDateTemp" type="daterange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" clear-icon @change="getStoreDate">
                            </el-date-picker>
                        </div>
                        <div class="below-item">
                            <span class="book-title">状态：</span>
                            <el-select v-model="WineRecordData.state" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in stateOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">营销员：</span>
                            <el-input v-model="WineRecordData.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item upper-date" style="width: 39%;">
                            <span class="book-title">到期时间：</span>
                            <el-date-picker v-model="ExpireDateTemp" type="daterange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon @change="getExpireDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>
                        
                        <div class="upper-item" style="width: 27%;">
                            <span class="book-title">剩余数量：</span>
                            <el-radio-group v-model="surNum" @change="surChange">
                                <el-radio label="1">全部</el-radio>
                                <el-radio label="2">大于0</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="btn-item" style="width: 30%;">
                            <div class="btn1" @click="GetStoreWineRecordList()">查询</div>
                            <div v-has-role="'wine-delay'" class="btn2" @click="wineDayShowDialog()">酒水延期</div>
                            <div class="btn3" @click="resetWineRecordList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="WineRecordList.data" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="checkStoreDetail" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" :min-width="orderColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="是否整瓶" :min-width="tableColumnWidth" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeQty" label="存酒数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="剩余数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="storeCapacity" label="容量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="expireDate" label="到期时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="状态" :min-width="tableColumnWidth" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.state == '0'" style="font-size: 0.7vw;">待寄存</span>
                                <span v-if="scope.row.state == '1'" style="font-size: 0.7vw;">已寄存</span>
                                <span v-if="scope.row.state == '4'" style="font-size: 0.7vw;">已过期</span>
                                <span v-if="scope.row.state == '5'" style="font-size: 0.7vw;">已回收</span>
                                <span v-if="scope.row.state == '9'" style="font-size: 0.7vw;">已拒绝</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeWineWaiter" label="存酒员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="auditUserName" label="审核员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="营销员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="remark" label="备注" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="barCode" label="存酒码" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="存酒记录" align="center" :min-width="tableColumnWidth">

                            <template #default="scope">
                                <div @click="checkStoreDetailC(scope.row)"
                                    style="cursor: pointer; color: #00AAFF; font-size: 0.7vw;">查看明细</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        v-model:currentPage="currentPage" :page-size="7" layout=" total, prev, pager, next, jumper"
                        :total="WineRecordList.totalCount || 0"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ theStoreDetail.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ theStoreDetail.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ theStoreDetail.storeWineWaiter }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>存酒名称：</div>
                        <span>{{ theStoreDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>存酒数量：</div>
                        <span class="frame">{{ theStoreDetail.storeQty }}</span>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">{{ theStoreDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>存酒时长：</div>
                        <span class="frame">{{ theStoreDetail.keepTime }}</span>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <img :src="theStoreDetail.attachment" alt="">
                </div>

                <div class="digital">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>·</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>0</div>
                    <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                </div>

                <div class="saveHand">
                    <div style="width: 100%;">补打存酒小票</div>
                    <!-- <div>存酒拒绝</div>
                <div class="confirm">存酒确认</div> -->
                </div>
            </div>
        </div>
        <!-- 存酒记录 end -->

        <!-- 取酒记录 start -->
        <div class="wineContent" v-if="isActive == '1'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list" style="justify-content: flex-start">
                        <div class="upper-item" style="width:22%">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="TakeWineRecordData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item upper-date" style="width:25%">
                            <span class="book-title">存酒日期：</span>
                            <el-date-picker v-model="StoreDateTemp1" type="daterange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" clear-icon @change="getStoreDateTake">
                            </el-date-picker>
                        </div>
                        <div class="upper-item" style="width:25%">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="TakeWineRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item" style="width:25%">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="TakeWineRecordData.isFull" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="below-item" style="width:22%">
                            <span class="book-title">状态：</span>
                            <el-select v-model="TakeWineRecordData.state" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in stateOpt2" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item upper-date" style="width:33%">
                            <span class="book-title">取酒日期：</span>
                            <el-date-picker v-model="TakeDateTemp" type="daterange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" clear-icon @change="getTakeDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>
                        <div class="below-item" style="width:9%">
                        </div>
                        <div class="btn-item">
                            <div class="btn1" @click="GetTakeWineRecordList()">查询</div>
                            <div class="btn3" @click="resetTakeWineRecordList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="TakeWineRecordList.data" tooltip-effect="dark"
                        class="book-table2" style="width: 100%;" @row-click="checkTakeDetail"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" :min-width="orderColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="是否整瓶" :min-width="tableColumnWidth" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="takenQty" label="数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="expireDate" label="取酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="takeDate" label="到期时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="takeWineWaiter" label="取酒员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="barCode" label="取酒码" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="取酒记录" align="center">
                        <template #default="scope">
                            <div @click="checkTakeDetail(scope.row)" style="cursor: pointer; color: #00AAFF;">查看明细</div>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        v-model:currentPage="currentPage" :page-size="10"
                        layout=" total,total, prev, pager, next, jumper"
                        :total="TakeWineRecordList.totalCount"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ theTakeDetail.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ theTakeDetail.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ theTakeDetail.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ theTakeDetail.takeWineWaiter }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>取酒名称：</div>
                        <span>{{ theTakeDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>取酒单位：</div>
                        <span class="frame">{{ theTakeDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>取酒数量：</div>
                        <span class="frame">{{ theTakeDetail.takenQty }}</span>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <img :src="theTakeDetail.attachment" alt="">
                </div>

                <div class="digital">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>·</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>0</div>
                    <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                </div>

                <div class="saveHand">
                    <div style="width: 100%;">补打取酒小票</div>
                    <!-- <div>取酒拒绝</div>
                <div class="confirm">取酒确认</div> -->
                </div>
            </div>
        </div>
        <!-- 取酒记录 end -->
        <!-- 已过期 start -->
        <div class="wineContent" v-if="isActive == '2'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item upper-date" style="width:25%">
                            <span class="book-title">存酒日期：</span>
                            <el-date-picker v-model="StoreDateTemp" type="daterange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon @change="getStoreDate">
                            </el-date-picker>
                        </div>
                        <div class="upper-item" style="width:25%">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="WineRecordData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item" style="width:25%">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="WineRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item" style="width:22%">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineRecordData.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item upper-date" style="width:33%">
                            <span class="book-title">到期时间：</span>
                            <el-date-picker v-model="ExpireDateTemp" type="daterange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon @change="getExpireDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                            <!-- <el-date-picker
                            is-range
                            v-model="endDate"
                            range-separator="一"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围"
                            style="height: 50px;"
                        ></el-date-picker> -->
                        </div>
                        <div class="btn-item" style="width:60%">
                            <div class="btn1" style="margin: 0; " @click="GetStoreWineRecordList()">查询</div>
                            <div v-has-role="'wine-delay'" class="btn2" @click="wineDayShowDialog()">酒水延期</div>
                            <div v-has-role="'wine-recycle-expire'" class="btn1" @click="recycle()">过期回收</div>
                            <div class="btn3" @click="resetWineRecordList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTablePass" :data="WineRecordList.data" tooltip-effect="dark"
                        class="book-table2" style="width: 100%;" @row-click="checkStoreDetail"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">
                        <el-table-column type="selection"> </el-table-column>
                        <el-table-column prop="roomName" label="桌号" :min-width="orderColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="是否整瓶" :min-width="tableColumnWidth" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeQty" label="存酒数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="剩余数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="容量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="expireDate" label="到期时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="状态" :min-width="tableColumnWidth" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.state == '0'" style="font-size: 0.7vw;">待寄存</span>
                                <span v-if="scope.row.state == '1'" style="font-size: 0.7vw;">已寄存</span>
                                <span v-if="scope.row.state == '4'" style="font-size: 0.7vw;">已过期</span>
                                <span v-if="scope.row.state == '5'" style="font-size: 0.7vw;">已回收</span>
                                <span v-if="scope.row.state == '9'" style="font-size: 0.7vw;">已拒绝</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeWineWaiter" label="存酒员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <!-- <el-table-column prop="mobile" label="审核员" :min-width="tableColumnWidth"  align="center"></el-table-column> -->
                        <el-table-column prop="maintainUserName" label="营销员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="remark" label="备注" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="barCode " label="存酒码" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="存酒记录" align="center" :min-width="tableColumnWidth">

                            <template #default="scope">
                                <div @click="checkStoreDetailJ(scope.row)"
                                    style="cursor: pointer; color: #00AAFF; font-size: 0.6vw;">查看明细</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        v-model:currentPage="currentPage" :page-size="7" layout=" total, prev, pager, next, jumper"
                        :total="WineRecordList.totalCount"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ theStoreDetail.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ theStoreDetail.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ theStoreDetail.storeWineWaiter }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>存酒名称：</div>
                        <span>{{ theStoreDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>存酒数量：</div>
                        <span class="frame">{{ theStoreDetail.storeQty }}</span>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">{{ theStoreDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>存酒时长：</div>
                        <span class="frame">{{ theStoreDetail.keepTime }}</span>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <img :src="theStoreDetail.attachment" alt="">
                </div>

                <div class="digital">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>·</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>0</div>
                    <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                </div>

                <div class="saveHand">
                    <div style="width: 100%;">补打存酒小票</div>
                    <!-- <div>存酒拒绝</div>
                <div class="confirm">存酒确认</div> -->
                </div>
            </div>
        </div>
        <!-- 已过期 end -->
        <!-- 存酒库存 start -->
        <div class="wineContent" v-if="isActive == '3'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item upper-date" style="width:35%">
                            <span class="book-title">盘点日期：</span>
                            <el-date-picker v-model="SotreWineStatData.selectedDate" value-format="YYYY-MM-DD" type="daterange" placeholder="选择日期"
                                clear-icon style="height: 2.7vw; width: 12vw; font-size: 0.9vw;"></el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>
                        <div class="upper-item" style="width:22%">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="SotreWineStatData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item" style="width:22%">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="SotreWineStatData.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <!-- <div class="below-item"></div><div class="below-item"></div> -->
                        <div class="btn-item" style="width:15%">
                            <div class="btn1" @click="GetSotreWineStat()">统计</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="SotreWineStatList" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="checkStoreDetail" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="goodsName" label="酒水名称" min-width="10% "
                            align="center"></el-table-column>
                        <el-table-column label="是否整瓶" min-width="6%" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7VW;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7VW;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remainQty" label="剩余存酒" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @current-change="SotreWineIndexChange"
                        v-model:currentPage="SotreWineStatData.pageIndex"
                        :page-size="Number(SotreWineStatData.pageSize)" layout=" total, prev, pager, next, jumper"
                        :total="SotreWineStatDataTotal"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight wineBoxRight-min-hg">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒库存</div>
                    <!-- <div>桌号：<span style="font-size: 20px; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div> -->
                </div>

                <div style="display: flex; align-items: center; font-size: 1vw; padding: 1vw 0;">
                    剩余存酒：<div
                        style="color: #FF6A00; font-weight: bold; width: 3vw; text-align: center; font-size: 1vw;">{{
                countNum }}</div>瓶
                </div>
            </div>
        </div>
        <!-- 存酒库存 end -->

        <!-- 回收统计 start -->
        <div class="wineContent" v-if="isActive == '4'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item upper-date" style="width: 39%;" >
                            <span class="book-title">统计日期：</span>
                            <el-date-picker v-model="StoreDateTemp" type="daterange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon @change="getRecoveryDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>
                        <div class="upper-item" style="width: 28%;">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="RecoveryWineStatData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item" style="width: 28%;">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="RecoveryWineStatData.fullType" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpts" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="below-item">
                            <span class="book-title">回收类型：</span>
                            <el-select v-model="RecoveryWineStatData.operType" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in recycleOperType" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>

                        <div class="btn-item">
                            <div class="btn1" @click="GetRecoveryWineStat()">统计</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="RecoveryWineStatList" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="checkStoreDetail" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="goodsName" label="酒水名称" min-width="10%" align="center"></el-table-column>
                        <el-table-column label="是否整瓶" min-width="6%" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.fullType == '0'" style="font-size: 0.7vw;">空瓶</span>
                                <span v-if="scope.row.fullType == '1'" style="font-size: 0.7vw;">非整瓶</span>
                                <span v-if="scope.row.fullType == '2'" style="font-size: 0.7vw;">整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="recoveryQty" label="回收数量" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="operType" label="回收类型" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @current-change="RecoveryWineIndexChange"
                        v-model:currentPage="RecoveryWineStatData.pageIndex"
                        :page-size="Number(RecoveryWineStatData.pageSize)" layout=" total, prev, pager, next, jumper"
                        :total="RecoveryWineStatDataTotal"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight wineBoxRight-min-hg2">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">回收统计</div>
                    <!-- <div>桌号：<span style="font-size: 20px; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div> -->
                </div>

                <div style="display: flex; align-items: center; font-size: 1vw; padding: 1vw 0;">
                    回收数量：<div
                        style="color: #FF6A00; font-weight: bold; width: 3vw; text-align: center; font-size: 1vw;">{{
                recoveryNum }}</div>瓶
                </div>
            </div>
        </div>

        <!-- 存取酒统计 start -->
        <div class="wineContent" v-if="isActive == '5'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item upper-date" style="width:32%">
                            <span class="book-title">统计日期：</span>
                            <el-date-picker v-model="StoreDateTemp6" type="daterange"  range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon
                                value-format="YYYY-MM-DD HH:mm:ss" @change="getSotreTakeDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                                </div>
                            </div>
                        <div class="upper-item" style="width:25%">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="SotreTakeWineStatData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item" style="width:25%">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="SotreTakeWineStatData.isFull" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <!-- <div class="below-item"></div><div class="below-item"></div> -->
                        <div class="btn-item" style="width:12%">
                            <div class="btn1" @click="GetSotreTakeWineStat()">统计</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="SotreTakeWineStatList" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="checkStoreDetail" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="goodsName" label="酒水名称" min-width="100" align="center"></el-table-column>
                        <el-table-column label="是否整瓶" min-width="60" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeQty" label="存酒" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="takeQty" label="取酒" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="difference" label="存取差" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="60" align="center"></el-table-column>
                    </el-table>
                </div>
                <div class="book-footer">
                    <el-pagination background @current-change="SotreTakeWineIndexChaneg"
                        v-model:currentPage="SotreTakeWineStatData.pageIndex"
                        :page-size="Number(SotreTakeWineStatData.pageSize)" layout=" total, prev, pager, next, jumper"
                        :total="SotreTakeWineStatDataTotal"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight wineBoxRight-min-hg3">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存取酒统计</div>
                    <!-- <div>桌号：<span style="font-size: 20px; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div> -->
                </div>

                <div style="display: flex; align-items: center; font-size: 1vw; padding: 1vw 0;">
                    存酒：<div style="color: #FF6A00; font-weight: bold; width: 3vw; text-align: center; font-size: 1vw;">
                        {{
                SotreTakeNum.storeQty }}</div>瓶
                </div>
                <div style="display: flex; align-items: center; font-size: 1vw; padding: 1vw 0;">
                    取酒：<div style="color: #FF6A00; font-weight: bold; width: 3vw; text-align: center; font-size: 1vw;">
                        {{
                SotreTakeNum.takeQty }}</div>瓶
                </div>
            </div>
        </div>
        <!-- 存取酒统计 end -->
        <!-- 回收统计 end -->
        <!-- 底部菜单 存酒 start -->

        <!-- 底部菜单 存酒 end -->
        <!-- 底部菜单 取酒 start -->

        <!-- 底部菜单 取酒 end -->
        <!-- 底部菜单 客遗回收 start -->

        <!-- 底部菜单 客遗回收 end -->
        <!-- 底部菜单 存取酒管理 start -->
        <!-- <div style="background-color: blue; height: 500px;" v-if="footerAct == '3'">
        <div v-for="item in WineList">{{ item }}</div>
    </div> -->
        <!-- 底部菜单 存取酒管理 end -->


    </div>
    <div>
        <el-dialog v-model="wineDayShow" :show-close="false" width="300px" title="酒水延期" center class="wineDayShow">
            <div class="DayInput">
                <div>存酒名称：</div>
                <input type="text" v-model="theStoreDetail.goodsName" disabled style="background-color: transparent;">
            </div>
            <div class="DayInput">
                <div>延期时间(天)：</div>
                <input type="text" v-model="delayDayText">
            </div>
            <div class="DayBtn">
                <div class="cancel" @click="wineDayShow = false">取消</div>
                <div class="confirm" @click="WineDelayDay()">确认</div>
            </div>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="tableSelectShow" :show-close="false" width="1000px">
            <div class="tableSelect">
                <div class="tableSelect-title">选择桌台</div>
                <div style="padding: 0 4px;">
                    <div class="tableSelect-tab">
                        <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList"
                            :key="k" @click="onChangeTab('tableSelect', k)">
                            <div>{{ v.name }}</div>
                            <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                        </div>
                    </div>
                </div>

                <div class="tableSelect-main" @click="onSelectTable">
                    <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode"
                        :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">{{ v.roomName }}
                    </div>
                    <!-- <div class="tableSelect-main-item spe" data-type="up" @click="onChangePage">上页</div>
            <div class="tableSelect-main-item spe" data-type="down" @click="onChangePage">下页</div> -->
                </div>
                <div class="popup-btn" style="padding: 0 4px;">
                    <div class="btn-cancle" @click="tableSelectShow = false">取消</div>
                    <div class="btn-submit" @click="confirmSelect">确认</div>
                </div>
            </div>
        </el-dialog>
    </div>
    <ZDialog v-model="confirmShow" width="60%" title="提示" content="确认要回收过期酒水吗？" @cancel="confirmShow = false"
        @confirm="OpCoveryWine"></ZDialog>
</template>

<script setup>
import Api from '@/api'
import { ref } from 'vue'
import dayjs from 'dayjs'
import ZDialog from '@/components/Dialog/Dialog.vue'
import ls from '@/lib/ls'
import IconDropDown from "@/components/Icon/IconDropDown.vue";

import { transformWorkTime , changeWorkTime } from '@/utils/chenhao.js'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  


const tableColumnWidth = ref('200')
const orderColumnWidth = ref('90')
console.log(window.innerWidth, 'window.innerWidth----------------');
window.addEventListener("resize", readerSize)
function readerSize() {
    console.log(window.innerWidth, 'window.innerWidth2222222');
    if (window.innerWidth >= 1200) {
        tableColumnWidth.value = '160'
    } else if (window.innerWidth >= 800 && window.innerWidth < 1200) {
        tableColumnWidth.value = '120'
    } else if (window.innerWidth >= 400 && window.innerWidth < 800) {
        tableColumnWidth.value = '40'
    }
}

const timeType = ref('0')

const inputRef = ref(null)
const onSelect = (i) => {
    console.log(i)
    i.storeQty = ''
}

const calcu = (i, n) => {
    i.storeQty += n
    oninput(i)
}

const oninput = (i) => {
    console.log(i)
    if (i.bottle == '0') {
        if (i.storeQty >= 1) {
            ElMessageBox.alert('数量必须小于1', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    i.storeQty = ''
                },
            });
        }
    } else {
        if (/\./g.test(i.storeQty) == true) {
            ElMessageBox.alert('请输入整数', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    i.storeQty = ''
                },
            });
        }
    }
}
const onfocus = (i) => {
    if (!i.bottle) {
        ElMessageBox.alert('请先选择类型', '标题', {
            confirmButtonText: '确定',
            callback: (action) => { },
        });
        inputRef.value[0].blur()
    }

}

// 存酒库存
const countNum = ref('')

const SotreWineStatData = ref({ selectedDate: '', goodsName: "", isFull: '', pageIndex: '1', pageSize: '10', })
SotreWineStatData.value.selectedDate = transformWorkTime('今天', orgStartTime, orgEndTime)
const SotreWineStatDataTotal = ref(0)
const SotreWineIndexChange = (e) => {
    SotreWineStatData.value.pageIndex = e
    GetSotreWineStat()
}
const SotreWineStatList = ref('')
const GetSotreWineStat = () => {
    countNum.value = 0
    let timeArr = changeWorkTime(timeType.value,SotreWineStatData.value.selectedDate[0],SotreWineStatData.value.selectedDate[1],orgStartTime,orgEndTime)
    SotreWineStatData.value.beginDate = timeArr[0]
    SotreWineStatData.value.endDate = timeArr[1]

    
    Api.Common.PcObjProcess.Do({ "functionName": "GetSotreWineStat", "orgCode": "0004", "contentData": SotreWineStatData.value })
        .then(res => {
            console.log(res);
            SotreWineStatList.value = res.data
            SotreWineStatDataTotal.value = res.totalCount
            SotreWineStatList.value.map(e => {
                console.log(e.remainQty)
                countNum.value += Number(e.remainQty)
            })
        })
}

// 回收统计
const recoveryNum = ref('')
const RecoveryWineStatData = ref({ beginDate: "", endDate: "", goodsName: "", fullType: '', operType: '', pageIndex: '1', pageSize: '10' })
const RecoveryWineStatDataTotal = ref(0)
const RecoveryWineStatList = ref('')
const RecoveryWineIndexChange = (e) => {
    RecoveryWineStatData.value.pageIndex = e
    GetRecoveryWineStat()
}
const GetRecoveryWineStat = () => {
    recoveryNum.value = 0 
    let timeArr = changeWorkTime(timeType.value,StoreDateTemp.value[0],StoreDateTemp.value[1],orgStartTime,orgEndTime)
    RecoveryWineStatData.value.beginDate = timeArr[0]
    RecoveryWineStatData.value.endDate =  timeArr[1]
    Api.Common.PcObjProcess.Do({ "functionName": "GetRecoveryWineStat", "orgCode": "0004", "contentData": RecoveryWineStatData.value })
        .then(res => {
            console.log(res);
            RecoveryWineStatList.value = res.data
            RecoveryWineStatDataTotal.value = res.totalCount
            RecoveryWineStatList.value.map(e => {
                console.log(e.recoveryQty)
                recoveryNum.value += Number(e.recoveryQty)
            })
        })
}

// 存取酒统计
const SotreTakeNum = ref({ storeQty: 0, takeQty: 0 })
const SotreTakeWineStatData = ref({ beginDate: "", endDate: "", goodsName: "", isFull: "", pageIndex: '1', pageSize: '10' })
const SotreTakeWineStatDataTotal = ref(0)
const SotreTakeWineStatList = ref('')
const SotreTakeWineIndexChaneg = (e) => {
    SotreTakeWineStatData.pageIndex = e
    GetSotreTakeWineStat()
}

// 获取存取酒统计明细
const GetSotreTakeWineStat = () => {
    SotreTakeNum.value.storeQty = 0
    SotreTakeNum.value.takeQty = 0
   
    let timeArr = changeWorkTime(timeType.value,StoreDateTemp6.value[0],StoreDateTemp6.value[1],orgStartTime,orgEndTime)
    
    SotreTakeWineStatData.value.beginDate = timeArr[0]
    SotreTakeWineStatData.value.endDate = timeArr[1]

    Api.Common.PcObjProcess.Do({ "functionName": "GetSotreTakeWineStat", "orgCode": "0004", "contentData": SotreTakeWineStatData.value }).then(res => {
        console.log(res);
        SotreTakeWineStatList.value = res.data
        SotreTakeWineStatDataTotal.value = res.totalCount
        SotreTakeWineStatList.value.map(e => {
            console.log(e.recoveryQty)
            SotreTakeNum.value.storeQty += Number(e.storeQty)
            SotreTakeNum.value.takeQty += Number(e.takeQty)
        })
    })
}

const getSotreTakeDate = (e) => {
    // SotreTakeWineStatData.value.beginDate = dateChange(e[0])
    // SotreTakeWineStatData.value.endDate = dateChange(e[1])  
}



const getRecoveryDate = (e) => {
    // RecoveryWineStatData.value.beginDate = dateChange(e[0]) 
    // RecoveryWineStatData.value.endDate = dateChange(e[1]) 
} 

//数据
// 日期选择器
const tableSelectShow = ref(false)
const tabSelActive = ref(0) // 选中桌台的下标
const input = ref('') // 手机号/姓名
// const menuList = ["待寄存确认", "待领取确认", "存酒记录", "取酒记录"];
const menuList = ["存酒明细", "取酒明细", "已过期", "存酒库存", "回收统计", "存取酒统计"];
// const StorageNav = ['本次消费存酒', '手动选择存酒']
const isActive = ref("0");
const bottle = ref('')
const bottleOpt = ref([
    {
        value: "1",
        label: "整瓶",
    },
    {
        value: "0",
        label: "非整瓶",
    },
]);
const bottleOpts = ref([
    {
        value: "0",
        label: "空瓶",
    },
    {
        value: "1",
        label: "非整瓶",
    },
    {
        value: "2",
        label: "整瓶",
    },
]);
const recycleOperType = ref([
    {
        value: "0",
        label: "空瓶回收",
    },
    {
        value: "1",
        label: "过期回收",
    },
    {
        value: "2",
        label: "客遗回收",
    },
]);
const stateOpt = ref([
    {
        value: "0",
        label: "待寄存",
    },
    {
        value: "1",
        label: "已寄存",
    },
    {
        value: "4",
        label: "已过期",
    },
    {
        value: "5",
        label: "已回收",
    },
    {
        value: "9",
        label: "已拒绝",
    },
]);
const stateOpt2 = ref([
    {
        value: "2",
        label: "待领取",
    },
    {
        value: "3",
        label: "已领取",
    }
]);

const StoreDateTemp1 = ref(transformWorkTime('今天', orgStartTime, orgEndTime))
const StoreDateTemp6 = ref(transformWorkTime('今天', orgStartTime, orgEndTime))

const menuChose = (index) => {
    footerAct.value = '-1'
    isActive.value = index;
    theStoreDetail.value = ''
    console.log('menuChose:', isActive.value);
    // TakeDateTemp.value = '' // 取酒日期置空 
    if (isActive.value == '0') {
        // WineListDatas.value.opType = '1'
        // getWineList()
        WineRecordData.value.state = ''
        GetStoreWineRecordList()
    } else if (isActive.value == '1') {
        // StoreDateTemp1.value = transformWorkTime('今天', orgStartTime, orgEndTime)
        StoreDateTemp1.value = ''
        GetTakeWineRecordList()
    } else if (isActive.value == '2') {
        WineRecordData.value.state = '4'
        GetStoreWineRecordList()
    } else if (isActive.value == '3') {
        GetSotreWineStat()
    } else if (isActive.value == '4') {
        GetRecoveryWineStat()
    } else if (isActive.value == '5') {
        StoreDateTemp6.value = transformWorkTime('今天', orgStartTime, orgEndTime)
        GetSotreTakeWineStat()
    }
};
const surNum = ref("1");

// function
const surChange = () => {
    console.log(surNum.value);
};

// 酒水延期
const wineDayShow = ref(false)
const delayDayText = ref('')
const wineDayShowDialog = () => {
    if (!theStoreDetail.value && selectedItem.value.length <= 0) {
        alert('未选择酒水信息')
    } else if (selectedItem.value.length > 1) {
        alert('酒水延期不可多选')
    }
    else {
        wineDayShow.value = true
        delayDayText.value = ''
    }
}
const WineDelayDay = () => {
    let contentData = {
        code: theStoreDetail.value.code,
        delayDay: delayDayText.value
    }
    Api.Common.PcObjProcess.Do({ functionName: "OpStoreWineDelayDay", orgCode: "0004", contentData })
        .then(async res => {
            wineDayShow.value = false
            alert(res.result)
            await GetStoreWineRecordList()
            let newDay = theStoreDetail.value.keepTime.split('天')[0]
            theStoreDetail.value.keepTime = JSON.stringify(parseInt(newDay) + parseInt(delayDayText.value)) + '天'
            checkStoreDetail(theStoreDetail.value)
        })
}
const selectedItem = ref([])
const handleSelectionChange = (val) => {
    console.log(val);
    selectedItem.value = val
    if (selectedItem.value.length >= 1) {
        theStoreDetail.value = selectedItem.value[selectedItem.value.length - 1]
    }
}
const confirmShow = ref(false)


const footerAct = ref('-1')
const fMenuChange = (index) => {
    isActive.value = '-1'
    footerAct.value = index
    if (footerAct.value == '0') {
        // GetRoomConsumeWineList()
        GetWineTypeList()
        tabSelName.value.name = ''
        tabSelName.value.code = ''
        WineItemData.value = []
    }
    if (footerAct.value == '1') {
        GetTakeWineList()
    }
    if (footerAct.value == '2') {
        // GetRoomConsumeWineList()
        GetWineTypeList()
        getWaiterList()
        tabSelName.value.name = ''
        tabSelName.value.code = ''
        WaiterItem.value = ''
        searchState.value = false
        WineItemData.value = []
    }
    if (footerAct.value == '3') {
        ElMessageBox.alert('操作成功', '标题', {
            confirmButtonText: '确定',
            callback: (action) => {
                return
            },
        });
    }
};

const StorageAct = ref('0')
const StorageChage = (index) => {
    StorageAct.value = index
    tabSelName.value = { name: '', code: '' }
    vipMemberName.value = ''
    vipMemberMobile.value = ''
    // WineItemData.value = []
}

// const MallTitle = ['全部','红酒','洋酒','白酒','啤酒','气泡酒']

const mineAct = ref('0')
const WineTypeItem = ref('')
const mallClass = (item, index) => {
    mineAct.value = index
    WineTypeItem.value = item.goodsList
}


// 获取待寄存列表
const WineList = ref([])
const WineListDatas = ref({ "roomName": "", "maintainUserName": "", "memberMobile": "", "isFull": "", 'pageSize': '10', 'pageIndex': '1', 'opType': '1' })
const getWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetStoreWineList", "orgCode": "0004", "contentData": WineListDatas.value })
        .then(res => {
            WineList.value = res
            console.log(res)
        })
}
// --------------------------------------------------- 分页 ---------------------------------------------------------------
const currentPage = ref('')
const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`)
}
const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`)
    WineListDatas.value.pageIndex = val
    WineRecordData.value.pageIndex = val
    TakeWineData.value.pageIndex = val
    getWineList()
    GetStoreWineRecordList()
    GetTakeWineList()
}

// 清空筛选
const resetWineList = (type) => {
    WineListDatas.value = { "roomName": "", "maintainUserName": "", "memberMobile": "", "isFull": "", 'pageSize': '10', 'pageIndex': '1', 'opType': type }
    getWineList()
}
const resetWineRecordList = () => {
    WineRecordData.value = { 'memberMobile': '', 'goodsName': '', 'beginStoreDate': '', 'endStoreDate': '', 'beginExpireDate': '', 'endExpireDate': '', 'isFull': '', 'state': '', 'maintainUserName': '', 'pageSize': '7', 'pageIndex': '1' }
    StoreDateTemp.value = ''
    ExpireDateTemp.value = ''
    // GetStoreWineRecordList()
}
const resetTakeWineRecordList = () => {
    TakeWineRecordData.value = { memberMobile: '', goodsName: '', beginTakeDate: '', endTakeDate: '', isFull: '', state: '', pageIndex: "1", pageSize: "10", endStoreDate: '', beginStoreDate: '' }
    TakeDateTemp.value = ''
    StoreDateTemp1.value = ''
    // GetTakeWineRecordList()
}
// 待寄存 添加
const wineItem = ref('')
const wineItemAdd = (row) => {
    wineItem.value = row
    console.log(wineItem.value)
}
const wineItemAdds = (row) => {
    console.log(row)
    wineItem.value = row
    console.log(wineItem.value)
}
//待寄存存酒确认/拒绝
const wineState = (item, opType) => {
    const WineStateData = ref({ "code": item.code, "storeQty": item.storeQty, "opType": opType })
    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWineState", "orgCode": "0004", "contentData": WineStateData.value })
        .then(res => {
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
        }).catch(err => {
            ElMessageBox.alert('操作失败', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
        })
}
//补打存酒小票
const PrintStoreWine = (code) => {
    Api.Common.PcObjProcess.Do({ "functionName": "RePrintStoreWine", "orgCode": "0004", "contentData": { "code": code } })
        .then(res => {
            console.log(res)
        })
}
//时间转换年月日
const dateChange = (newDate) => {
    const timestamp = newDate
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; //月份是从0开始的，所以要加1
    const day = date.getDate();
    const result = year + '-' + month + '-' + day;
    console.log(result); // 输出：2021-01-01
    return result
}
//获取存酒记录
const WineRecordList = ref([])
const WineRecordData = ref({ 'memberMobile': '', 'goodsName': '', 'beginStoreDate': '', 'endStoreDate': '', 'beginExpireDate': '', 'endExpireDate': '', 'isFull': '', 'state': '', 'maintainUserName': '', 'pageSize': '7', 'pageIndex': '1' })
const StoreDateTemp = ref(transformWorkTime('今天', orgStartTime, orgEndTime))
const ExpireDateTemp = ref('')
const getStoreDate = (e) => {
    // WineRecordData.value.beginStoreDate = dateChange(e[0])
    // WineRecordData.value.endStoreDate = dateChange(e[1])
}
const getExpireDate = (e) => {
    // WineRecordData.value.beginExpireDate = dateChange(e[0])
    // WineRecordData.value.endExpireDate = dateChange(e[1])
}
const GetStoreWineRecordList = () => {
    console.log(ExpireDateTemp.value);
    console.log(StoreDateTemp.value);
    
    let timeArr = changeWorkTime(timeType.value,StoreDateTemp.value[0],StoreDateTemp.value[1],orgStartTime,orgEndTime)
    let timeArr1 = changeWorkTime(timeType.value,ExpireDateTemp.value[0],ExpireDateTemp.value[1],orgStartTime,orgEndTime)
    WineRecordData.value.beginStoreDate = timeArr[0]
    WineRecordData.value.endStoreDate = timeArr[1]
    WineRecordData.value.beginExpireDate = timeArr1[0]
    WineRecordData.value.endExpireDate = timeArr1[1]
    
    console.log('WineRecordData.value', WineRecordData.value)
    Api.Common.PcObjProcess.Do({ "functionName": "GetStoreWineRecordList", "orgCode": "0004", "contentData": WineRecordData.value }).then(res => {
        WineRecordList.value = res
        console.log(WineRecordList.value)
    })
}
//存酒记录-查看明细
const theStoreDetail = ref('')
const checkStoreDetailC = (row) => {
    console.log(row)
    // theStoreDetail.value = row
    TakeWineRecordData.value = {
        pageIndex: "1",
        pageSize: "10",
        memberMobile: row.memberMobile,
        goodsName: row.goodsName,
        beginStoreDate: dayjs(row.storeDate).format('YYYY-MM-DD'),
        endStoreDate: dayjs(row.storeDate).format('YYYY-MM-DD'),
    }
    // StoreDateTemp.value = [dayjs(row.storeDate).format('YYYY-MM-DD'),dayjs(row.storeDate).format('YYYY-MM-DD')]
    GetTakeWineRecordList() // 获取取酒记录
    isActive.value = '1' // 跳转到取酒明细
}
const multipleTablePass = ref(null);
const checkStoreDetail = (row) => {
    console.log(row)
    console.log(multipleTablePass.value);
    if (multipleTablePass.value) {
        multipleTablePass.value.clearSelection();
    }
    theStoreDetail.value = row
    if (multipleTablePass.value) {
        multipleTablePass.value.toggleRowSelection(row)
    }

}
const checkStoreDetailJ = (row) => {
    console.log(row)
    // theStoreDetail.value = row
    TakeWineRecordData.value = {
        pageIndex: "1", pageSize: "10", storeCode: row.code
    }
    GetTakeWineRecordList()
    isActive.value = '3'
    // GetTakeWineRecordList()

}

//取酒记录
const TakeWineRecordList = ref('')
const TakeWineRecordData = ref({ memberMobile: '', goodsName: '', beginTakeDate: '', endTakeDate: '', isFull: '', state: '', pageIndex: "1", pageSize: "10", beginStoreDate: '', endStoreDate: '', })
const TakeDateTemp = ref(transformWorkTime('今天', orgStartTime, orgEndTime))
const getTakeDate = (e) => {
    // TakeWineRecordData.value.beginTakeDate =  dateChange(e[0])
    // TakeWineRecordData.value.endTakeDate =  dateChange(e[1]) 
}
const getStoreDateTake = (e) => {
    // TakeWineRecordData.value.beginStoreDate =  dateChange(e[0])
    // TakeWineRecordData.value.endStoreDate =  dateChange(e[1])
}

// 取酒明细
const GetTakeWineRecordList = () => {
    TakeWineRecordData.value.beginTakeDate = TakeDateTemp.value[0]     
    TakeWineRecordData.value.endTakeDate = TakeDateTemp.value[1]       
    TakeWineRecordData.value.beginStoreDate = StoreDateTemp1.value[0]
    TakeWineRecordData.value.endStoreDate = StoreDateTemp1.value[1]
    console.log('TakeWineRecordData.value:', TakeWineRecordData.value)
    Api.Common.PcObjProcess.Do({ "functionName": "GetTakeWineRecordList", "orgCode": "0004", "contentData": TakeWineRecordData.value }).then(res => {
        console.log(res)
        TakeWineRecordList.value = res
    })
}

//取酒记录-查看明细
const theTakeDetail = ref('')
const checkTakeDetail = (row) => {
    theTakeDetail.value = row
}


//存酒 - 本次消费存酒
const RoomConsumeData = ref({ "roomName": "", "memberMobile": "", "maintainUserName": "" })
const RoomConsumeNewData = ref('')
const GetRoomConsumeWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetRoomConsumeWineList", "orgCode": "0004", "contentData": RoomConsumeData.value })
        .then(res => {
            RoomConsumeNewData.value = res
            console.log(res)
        })
}
//存酒 - 添加
const RoomConsumeList = ref([])
const RoomConsumeItem = ref('')
const RoomConsumeAdd = (row) => {
    RoomConsumeItem.value = row
    RoomConsumeItem.value.bottle = '1'
    RoomConsumeItem.value.storeQty = ''
    RoomConsumeItem.value.storeDay = ''
    RoomConsumeList.value.push(RoomConsumeItem.value)
    console.log(RoomConsumeList.value)
}

//存酒- 获取酒水分类
const WineTypeList = ref('')
const GetWineTypeList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetWineTypeList", "orgCode": "0004", "contentData": {} })
        .then(res => {
            console.log(res.result)
            WineTypeList.value = res.result
            if (!WineTypeItem.value) {
                WineTypeItem.value = res.result[0].goodsList
            }
        })
}

//手动存酒 添加酒水
const WineItemData = ref([])
const chooseWineItem = (i) => {
    let newData = {
        bottle: '1',
        storeQty: '',
        storeDay: ''
    }
    Object.assign(i, newData)
    WineItemData.value.push(JSON.parse(JSON.stringify(i)))
    console.log(WineItemData.value)
}

// 获取房台类型
const zoneList = ref('')
const getTableType = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "contentData": { "parentCode": "101" }, "orgCode": "0004" })
        .then(res => {
            let newArray = [{ code: '', name: '全部' }]
            Array.prototype.push.apply(newArray, res.result)
            zoneList.value = newArray
        })
}

// 获取房台
const usePostForm = ref({
    reserveTime: new Date(),
    roomState: '',
    typeCode: '',
    pageSize: 38,
    pageIndex: 1
})
const freeTableList = ref([])
const getCanUseTables = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": usePostForm.value })
        .then(res => {
            freeTableList.value = res.result[0].areaRooms
            console.log(freeTableList.value);
        })
}

const tabSelName = ref({
    name: '',
    code: ''
})
const confirmSelect = (e) => {
    tableSelectShow.value = false
    console.log(tabSelName.value)
}

// 桌台选中切换
const onSelectTable = (e) => {
    console.log(e.target.dataset);
    if (e.target.dataset.id) {
        tabSelActive.value = e.target.dataset.id
        tabSelName.value.name = e.target.dataset.name
        tabSelName.value.code = e.target.dataset.code
    }
}

// 上下页切换
const onChangePage = (e) => {
    if (e.target.dataset.type == 'down') {
        if (freeTableList.value.length >= 1) {
            console.log(freeTableList.value.length)
            usePostForm.value.pageIndex++
        }
    } else {
        if (freeTableList.value.length >= 1) {
            console.log(freeTableList.value.length)
            usePostForm.value.pageIndex--
        }
    }
    getCanUseTables()
}

//回收选择桌号

const recTabShow = () => {
    tableSelectShow.value = true
    getTableType()
    getCanUseTables()
}

//存酒选择桌号

const tabShow = () => {
    tableSelectShow.value = true
    getTableType()
    getCanUseTables()
}

//会员查询
const vipMemberMobile = ref('')
const vipMemberName = ref('')
const GetMemberInfo = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": vipMemberMobile.value } })
        .then(res => {
            console.log(res.name);
            vipMemberName.value = res.name
        })
}

//手动选择存酒 - 存酒确认

const OpStoreWine = () => {
    const OpStoreWineData = ref({
        memberMobile: '',
        roomCode: '',
        images: "",
        consumeCode: "",
        remark: "",
        goods: []
    })
    OpStoreWineData.value.memberMobile = vipMemberMobile.value
    OpStoreWineData.value.roomCode = tabSelName.value.code
    OpStoreWineData.value.goods = JSON.stringify(WineItemData.value)
    console.log(OpStoreWineData.value)
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWine", "orgCode": "0004", "contentData": OpStoreWineData.value })
        .then(res => {
            console.log(res);
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
        })
}

//本次消费存酒 - 存酒确认
const OpStoreWineData2 = ref({})
const OpStoreWine2 = (i) => {
    OpStoreWineData2.value = {
        memberMobile: i[0].memberMobile,
        roomCode: i[0].roomCode,
        images: '',
        consumeCode: i[0].consumeCode,
        remark: '',
        goods: []
    }
    console.log(i)
    // let tempData = {
    //     goodsCode: '',
    //     goodsName: '',
    //     uomCode: '',
    //     uomName: '',
    //     storeQty: '',
    //     storeDay: ''
    // }
    i.map(e => {
        // tempData.goodsCode = e.goodsCode
        // tempData.goodsName = e.goodsName
        // tempData.uomCode = e.uomCode
        // tempData.uomName = e.uomName
        // tempData.storeQty = e.storeQty
        // tempData.storeDay = e.storeDay
        OpStoreWineData2.value.goods.push(e)
    })
    OpStoreWineData2.value.goods = JSON.stringify(OpStoreWineData2.value.goods)
    // console.log(JSON.stringify(OpStoreWineData2.value.goods))
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWine", "orgCode": "0004", "contentData": OpStoreWineData2.value })
        .then(res => {
            console.log(res);
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
        })
}

// 获取取酒列表
const TakeWineList = ref('')
const TakeWineData = ref({ memberMobile: '', memberName: '', maintainUserName: '', pageSize: '10', pageIndex: '1' })
const GetTakeWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetTakeWineList", "orgCode": "0004", "contentData": TakeWineData.value })
        .then(res => {
            TakeWineList.value = res
            console.log(TakeWineList.value)
        })
}

// 取酒操作
const takeView = ref(null)
const takeViewState = ref(false)

const TakeWineInfo = ref('')
const TakeWineAdd = (row) => {
    TakeWineInfo.value = row
    let a = { takeQty: '' }
    Object.assign(TakeWineInfo.value, a)
    console.log(TakeWineInfo.value)
    if (TakeWineInfo.value.remainQty < 1) {
        takeViewState.value = true
        TakeWineInfo.value.takeQty = TakeWineInfo.value.remainQty
    } else {
        takeViewState.value = false
    }
}

const takeInput = (remain, take) => {
    if (Number(remain) < Number(take)) {
        ElMessageBox.alert('取酒数量不能大于库存', '标题', {
            confirmButtonText: '确定',
            callback: (action) => {
                TakeWineInfo.value.takeQty = TakeWineInfo.value.remainQty
            },
        });
    }
    if (Number(take) >= 1) {
        if ((parseInt(Number(take), 10) === Number(take)) == false) {
            ElMessageBox.alert('请输入整数', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    TakeWineInfo.value.takeQty = ''
                },
            });
        }
    }
}

// 取酒确认按钮

// const OpTakewineData = ref({"memberMobile":"","roomCode":"","storeCode":"","takeQty":""})
const OpTakeWine = (wineInfo) => {
    console.log(wineInfo)
    let OpTakewineData = {
        "memberMobile": wineInfo.memberMobile,
        "roomCode": wineInfo.roomCode,
        "storeCode": wineInfo.code,
        "takeQty": wineInfo.takeQty
    }
    Api.Common.PcObjProcess.Do({ "functionName": "OpTakeWine", "orgCode": "0004", "contentData": OpTakewineData })
        .then(res => {
            console.log(res)
            TakeWineInfo.value = ''
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    TakeWineInfo.value.takeQty = ''
                },
            });
            GetTakeWineList()
        })
}

// 获取服务员列表
const WaiterItem = ref('')
const WaiterList = ref([])

const getWaiterList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "getWaiterList", "contentData": "" })
        .then(res => {
            console.log(res.result)
            WaiterList.value = res.result
        })
}

// 酒水回收二次确认弹窗
const recycle = () => {
    if (selectedItem.value.length > 0) {
        confirmShow.value = true
    } else {
        alert('未选择酒水信息')
    }

}

// 过期回收酒水操作
const CoveryWineData = ref({ "coveryUserCode": "", "coveryUserName": "", "operType": "1", "goods": "[]" })
const OpCoveryWine = () => {
    const userInfo = ls.get('USER_INFO')
    CoveryWineData.value.coveryUserCode = userInfo.userCode
    CoveryWineData.value.coveryUserName = userInfo.userName

    CoveryWineData.value.goods = JSON.stringify(selectedItem.value)

    console.log(CoveryWineData.value);

    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreCoveryWine", "contentData": CoveryWineData.value })
        .then(res => {
            console.log(res.result)
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    WineRecordData.value.state = '4'
                    GetStoreWineRecordList()
                },
            });
        })
}


//客遗回收查询
const searchState = ref(false)
const RoomrecoveryData = ref({ "roomName": "", "memberMobile": "", "maintainUserName": "" })
const RoomrecoveryNewData = ref('')
const GetRoomrecoveryWineList = () => {
    tabSelName.value.name = ''
    tabSelName.value.code = ''
    WaiterItem.value = ''
    WineItemData.value = []
    searchState.value = true
    console.log(searchState.value)
    Api.Common.PcObjProcess.Do({ "functionName": "GetRoomConsumeWineList", "orgCode": "0004", "contentData": RoomrecoveryData.value })
        .then(res => {
            RoomrecoveryNewData.value = res
            console.log(res)
        })
}

const test = () => {
    window.open('https://jtmckj.com:8080/#/login')
}

const WineItemDel = (i) => {
    WineItemData.value.splice(i, 1)
}

const RoomConsumeDel = (i) => {
    RoomConsumeList.value.splice(i, 1)
}

const tableRowClassName = ({ row, rowIndex }) => {
    // console.log(row)
    if (row.isFull == 1) {
        return 'warning-row'
    }
    return ''
    // if (rowIndex === 1) {
    //   return 'warning-row'
    // } else if (rowIndex === 3) {
    //   return 'success-row'
    // }
    // return ''
}

// 数字输入
const showDig = ref('')
const Digstate = ref('')
const getInputType = (state, index) => {
    showDig.value = index
    Digstate.value = state
}

const tableSelectActive = ref(0) // 选中桌台类型的下标

const onChangeTab = (type, k, v) => {
    switch (type) {
        case 'consult':
            consultActive.value = k
            console.log(consultActive.value)
            break
        case 'zone':
            zoneActive.value = k
            postForm.value.typeCode = zoneList.value[k].code
            getTableInfo()
            break
        case 'time':
            timeActive.value = k
            postForm.value.reserveTime = timeList.value[k].value
            currentTime.value = timeList.value[k].value
            getTableInfo()
            break
        case 'type':
            typeActive.value = k
            console.log(typeList.value[k].state);
            postForm.value.roomState = typeList.value[k].state
            getTableInfo()
            break
        case 'popup':
            if (v) {
                popupTitle.value = v
                console.log(popupTitle.value);
                popupActive.value = k
                if (popupTitle.value == '操作记录') {
                    // 获取操作记录
                    getRoomOpeHistory()
                }
            }
            break
        case 'popup-time':
            recordsTimeActive.value = k
            console.log(recordsTimeList.value[k]);
            recordForm.value.stratDate = recordsTimeList.value[k].startTime
            recordForm.value.endDate = recordsTimeList.value[k].endTime
            getRoomOpeHistory()
            break
        case 'tableSelect':
            tableSelectActive.value = k
            usePostForm.value.typeCode = zoneList.value[k].code
            getCanUseTables()
            break

    }

}

// ------------------------------------------------ 初始化 --------------------------------------------------------
const onInit = async () => {
    getWineList() // 获取待寄存列表
}
onInit()
</script>

<style>
.el-table .warning-row {
    /* background-color: #FFFBE5 !important; */
}

.el-table .success-row {
    --el-table-tr-background-color: var(--el-color-success-lighter);
}
</style>

<style scoped lang="scss">
* {
    font-size: 16px;
}

:deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

:deep input[type="number"] {
    -moz-appearance: textfield;
}

::v-deep {
    .el-radio__input.is-checked+.el-radio__label {
        color: #ff6a00;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: #ffffff;
        border-color: #ff6a00;
    }

    .el-radio__inner:after {
        background-color: #ff6a00;
        width: 7px;
        height: 7px;
    }

    .el-radio__inner {
        border-color: #ff6a00;
        background-color: #ffffff;
    }

}

.wineContent {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.wineBoxLeft {
    width: 67%;
    // min-height: 800px;
    margin-top: 50px;
}

.wineBoxRight {
    width: 31.5%;
    // min-height: 800px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px 20px;
    padding-bottom: 30px;
    border-radius: 10px;
}

.wineMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    background-color: #e6e6e6;
    border-radius: 5px;
    padding: 10px 0 3px 0;
    width: 67%;

    >div {
        width: 25%;
        text-align: center;
        font-size: 16px;

        span {
            cursor: pointer;
        }

        div {
            width: 25px;
            height: 2px;
            margin: auto;
            margin-top: 8px;
        }
    }

    .menuActive {
        span {
            color: #ff6a00;
        }

        div {
            background-color: #ff6a00;
        }
    }
}

.upper-list {
    width: 100%;
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(400px,1fr) ); /* 定义3列 */
    grid-column-gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .upper-item {
        width: 31%;
        display: flex;
        align-items: center;
        margin-top: 15px;

        .book-title {
            width: 30%;
            text-align: right;
            white-space: nowrap;
        }
        .time-radio{
            padding-left: 10px;
        }

        .book-text {
            width: 70%;
            height: 48px;
            font-size: 16px;
        }

        ::v-deep(.el-radio__label) {
            font-size: 16px;
        }

    }

    .below-item {
        width: 31%;
        display: flex;
        align-items: center;
        margin-top: 15px;

        .book-title {
            width: 30%;
            text-align: right;
            white-space: nowrap;
        }

        .el-select {
            width: 70%;
        }

        ::v-deep(.el-select__wrapper) {
            width: 100%;
            height: 48px;
            font-size: 16px;
        }
    }

    .upper-date {

        // width: 40%;
        .book-title {
            width: 30%;
            text-align: right;
        }

        ::v-deep(.el-range-input) {
            font-size: 12px;
        }

        ::v-deep(.el-range-editor.el-input__wrapper) {
            height: 48px;
            width: 70%;
        }
    }

    .btn-item {
        width: 31%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 15px;

        >div {
            margin-left: 18px;
            width: 130px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }

        .btn1 {
            background-color: #ffe566;
        }

        .btn2 {
            background-color: #ffe566;
        }

        .btn3 {
            background-color: #e6e6e6;
            color: #666;
        }
    }
}

.tableBox {
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 6px;

    ::v-deep .el-table {
        --el-table-border: 0;
        --el-table-border-color: 0;
    }

    ::v-deep .el-table th {
        background-color: #f9f9f9;
        height: 10px;
    }

    ::v-deep .el-table tr:nth-child(odd) {
        // background-color: #f2f2f2;
    }

    ::v-deep .el-table thead {
        color: #666666;
        font-weight: 500;
    }

    ::v-deep .el-table .cell {
        line-height: 1;
    }
}

.book-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;

    .footer-button {
        background: #ff6a00;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        padding: 15px 22px;
        margin-left: 8px;
    }

    ::v-deep(.el-pagination) {
        // width: 100%;

    }

    ::v-deep(.el-pagination.is-background .el-pager li) {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background-color: #e6e6e6;
        font-size: 18px;
    }

    ::v-deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #ff6a00 !important;
        color: var(--el-color-white);
        font-size: 18px;
    }
}

.footerNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-top: 20px;
    width: 67%;

    // position: absolute;
    // left: 0;
    // bottom: -30px;
    >div {
        width: 22%;
        height: 80px;
        line-height: 80px;
        background-color: #ffd400;
        border-radius: 10px;
        font-size: 18px;
        cursor: pointer;
    }

    .fmClass {
        background-color: #FF6A00;
        color: #fff;
    }
}

.tableTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 14px;
}

.vipUser {
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(250px,1fr) );
    // grid-column-gap: 10px;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid #E5E5E5;

    ::v-deep(.el-input__inner) {
        font-size: 16px !important;
    }

    ::v-deep(.el-input__wrapper) {
        background-color: #F9F9F9;
        border: none !important;
        box-shadow: none !important;
        border-radius: 6px;
        height: 48px;
    }

    ::v-deep(.el-select__wrapper) {
        box-shadow: 0 0 0 1px transparent inset;
        background-color: #F9F9F9;
        height: 48px;
    }

    ::v-deep(.el-select__placeholder) {
        font-size: 16px;
    }

    .el-input {
        height: 54px;
        width: 190px;
    }

    >div {
        width: 50%;
        display: flex;
        align-items: center;
        margin-top: 18px;

        >div {
            width: 40%;
            text-align: right;
        }

        .frame {
            background-color: #F9F9F9;
            color: #999999;
            display: block;
            box-sizing: border-box;
            padding: 14px 5px;
            width: 60%;
            height: 48px;
            border-radius: 10px;
        }
    }
}

.wineInfo {
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(250px,1fr) );
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;

    >div {
        width: 50%;
        display: flex;
        align-items: center;
        margin-top: 18px;

        >div {
            width: 40%;
            text-align: right;
        }

        .frame {
            background-color: #F9F9F9;
            color: #999999;
            display: block;
            box-sizing: border-box;
            padding: 14px 5px;
            width: 60%;
            height: 48px;
            border-radius: 10px;
            border: 1px solid #E6E6E6;
        }
    }

    ::v-deep(.el-input__wrapper) {
        background-color: #F9F9F9;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        font-size: 16px;
        height: 48px;
    }
}

.wineLogo {
    margin-top: 18px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    flex-wrap: wrap;

    div {
        width: 21%;
        text-align: right;
    }

    img {
        width: 75px;
        height: 75px;
        margin-right: 10px;
    }

    img:last-child {
        margin-right: 0;
    }
}

.digital {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 25px;
    background-color: #F9F9F9;
    box-sizing: border-box;
    padding: 15px 25px;
    border-radius: 10px;
    margin-top: 60px;

    div {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        background-color: #E6E6E6;
        font-size: 16px;
        color: #212121;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 35px;
            height: auto;
        }
    }
}

.saveHand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    div {
        width: 31%;
        padding: 20px 0;
        font-size: 18px;
        border-radius: 10px;
        text-align: center;
        border: 1px solid #FF6A00;
        color: #FF6A00;
        cursor: pointer;
    }

    .confirm {
        background-color: #FF6A00;
        color: #fff;
    }
}

.StorageNav {
    display: flex;
    align-items: center;

    >div {
        padding: 15px 30px;
        background-color: #E6E6E6;
        color: #666666;
        margin-right: 30px;
        font-size: 22px;
        border-radius: 10px;
        margin-top: 15px;
        cursor: pointer;
    }

    .StorageClass {
        background-color: #FFE566;
        color: #212121;
    }
}

.wineSaveContent {
    .wineSaveTitle3 {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 25%;
        }

        >div:nth-child(3) {
            width: 25%;
        }

        >div:nth-child(4) {
            width: 25%;
        }
    }

    .wineSaveTitle2 {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 20%;
        }

        >div:nth-child(3) {
            width: 20%;
        }

        >div:nth-child(4) {
            width: 20%;
        }

        >div:nth-child(5) {
            width: 15%;
        }
    }

    .wineSaveTitle {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 20%;
        }

        >div:nth-child(3) {
            width: 20%;
        }

        >div:nth-child(4) {
            width: 20%;
        }

        >div:nth-child(5) {
            width: 15%;
        }
    }

    .wineSaveList {
        .wineSaveItem3 {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 25%;
            }

            >div:nth-child(3) {
                width: 25%;
            }

            >div:nth-child(4) {
                width: 25%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                text-align: center;
                font-size: 16px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
                height: 48px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                height: 48px;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
            }
        }

        .wineSaveItem2 {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 20%;
            }

            >div:nth-child(3) {
                width: 20%;
            }

            >div:nth-child(4) {
                width: 20%;
            }

            >div:nth-child(5) {
                width: 15%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                text-align: center;
                font-size: 16px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
                height: 48px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                height: 48px;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
            }
        }

        .wineSaveItem {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 20%;
            }

            >div:nth-child(3) {
                width: 20%;
            }

            >div:nth-child(4) {
                width: 20%;
            }

            >div:nth-child(5) {
                width: 15%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                text-align: center;
                font-size: 16px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
                height: 48px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                height: 48px;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
            }

        }

    }
}

.wineMall {
    background-color: #fff;
    box-sizing: border-box;
    padding: 22px 40px;
    border-radius: 10px;
    margin-top: 20px;

    .MallTitle {
        display: flex;
        align-items: center;
        background-color: #F2F2F2;
        color: #666666;
        border-radius: 6px;
        padding: 15px 0 5px 0;

        >div {
            cursor: pointer;
        }

        .mineClass {
            width: 150px;
            text-align: center;
        }

        .mineChose {
            width: 30px;
            height: 2px;
            margin: auto;
            margin-top: 10px;
        }

        .mineChoseClass {
            .mineClass {
                color: #FF6A00;
            }

            .mineChose {
                background-color: #FF6A00;
            }
        }
    }

    .MallList {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 510px;

        .MallItem {
            text-align: center;
            width: 200px;
            cursor: pointer;

            img {
                width: 200px;
                height: 200px;
                margin-top: 20px;
                vertical-align: middle;
            }

            div {
                margin-top: 15px;
            }
        }
    }
}

.tableSelect {
    white-space: nowrap;
    padding: 36px 52px 20px;

    .tableSelect-title {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding: 0 0 32px 8px;
    }

    .tableSelect-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 42px;
        background: #F2F2F2;
        border-radius: 8px;

        // padding-left: 8px;
        .tab-item {
            padding: 15px 0px;
            width: 16%;
            text-align: center;
            cursor: pointer;
            position: relative;

            &.active {
                color: #FF6A00;
            }

            .tab-item-bottom {
                position: absolute;
                bottom: 4px;
                left: 50%;
                transform: translateX(-50%);
                width: 24px;
                height: 2px;
                background-color: #FF6A00;
                border-radius: 1px;
                display: none;

                &.active {
                    display: block;
                }
            }
        }
    }

    .tableSelect-main {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
        padding-top: 20px;

        .tableSelect-main-item {
            // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
            width: calc(12.5% - 16px);
            height: 96px;
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
            line-height: 96px;
            margin: 0 8px 16px 8px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            cursor: pointer;

            &.spe {
                background: #E6E6E6;
            }

            &.active {
                background: #FFE566;
            }
        }
    }

    .popup-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-cancle {
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            margin-right: 36px;
            cursor: pointer;
        }

        .btn-submit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            cursor: pointer;
        }
    }
}

:deep .wineDayShow {
    border-radius: 10px;

    .DayInput {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;

        input {
            background-color: #F9F9F9;
            color: #212121;
            width: 60%;
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 8px;
        }
    }

    .DayBtn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        div {
            width: 45%;
            text-align: center;
            padding: 10px 0;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid #FF6A00;
        }

        .cancel {
            color: #FF6A00;
        }

        .confirm {
            background-color: #FF6A00;
            color: #fff;
        }
    }
}

.book-table {
    min-height: 410px;
}

.book-table2 {
    min-height: 480px;
}

.wineBoxRight-min-hg {
    min-height: 605px;
}

.wineBoxRight-min-hg2 {
    min-height: 665px;
}

.wineBoxRight-min-hg3 {
    min-height: 610px;
}

@import '@/styles/com_style_input.css';
</style>
